<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { headersStore } from '@/stores/apiHeader'
import { roleStore } from '@/stores/role'
import FinancialProgressBar from '@/components/PermissionsModule/Finance/components/FinancialProgressBar.vue'
import { storeToRefs } from 'pinia'
import { useFinanceStore } from '@/stores/module/finance'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentPath = router.currentRoute.value.path
const useHeadersStore = headersStore()
const store = roleStore() as any
const { financeLevel } = store
const rule = ref() // 1 普通 2 中级 3 高级
const info = () => {
  rule.value = financeLevel
}
info()

// 1 全球 2 区域 3 国家
const newRole = ref(0)
newRole.value = financeLevel // 初始化面板权限

//获取当前月份
const month = computed(() => {
  return headersStore().month
})
// 深度监听 store.panelPermissions
watch(
  () => store.financeLevel,
  (newVal) => {
    newRole.value = newVal
  }
)

const every_code = computed(() => {
  return headersStore().every_code
})
// 设置切换区域对比或国家对比
const changeEveryCode = (code: string) => {
  useHeadersStore.setEveryCode(code) // 设置区域code 0各个区域，1 各个国家 默认空
}
const scope_code = computed(() => {
  return headersStore().scope_code
})
const FinanceStore = useFinanceStore() // 创建store实例
const { getAchievementRate } = storeToRefs(FinanceStore)
const title = computed(() => {
  return getAchievementRate.value.title
})
// const titleBox = ref({ value: '' })

// 获取数据

// titleBox.value.value = getAchievementRate.value.title

// 替换括号
// if (currentPath === '/finance' && titleBox.value != null) {
//   titleBox.value.value = titleBox.value.value
//     .replace('(', '<span style="color: #f18337;">(')
//     .replace(')', ')</span>')
// }
</script>
<template v-slot:title>
  <div class="financialFooter">
    <div class="footerfinancial">
      <!-- <div class="financialFooter-img">
        <div>
          {{
            getAchievementRate.info &&
            getAchievementRate.info[0] &&
            getAchievementRate.info[0].completedRate
              ? (getAchievementRate.info[0].completedRate * 100).toFixed(0) +
                '%'
              : '0%'
          }}
        </div>
        <img
          src="@/assets/images/FinancialPicture/achievement-rate-icon.png"
          alt=""
        />
      </div> -->
      <div class="financialFooter-name">
        <TitleCom>{{ title }}</TitleCom>
        <FinancialProgressBar />
      </div>
    </div>
    <div class="financialFooter-btn">
      <button
        @click="changeEveryCode('0')"
        v-if="(newRole == 1 && every_code == '') || scope_code.length == 1"
      >
        {{ $t('bi_financeregioncomparisionsfje') }}
        <!-- 各区对比 -->
      </button>
      <button
        @click="changeEveryCode('1')"
        v-if="newRole == 2 && every_code == '' && scope_code.length == 10"
      >
        {{
          scope_code === '0000111104'
            ? $t('bi_financecitycomparsion')
            : $t('bi_financecountrycomparisonsaq')
        }}
        <!-- 各国对比 -->
      </button>
      <!-- <button
        @click="changeEveryCode('')"
        v-if="newRole == 1 && every_code !== ''"
      >
        全球数据
      </button> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.financialFooter {
  // width: 50vw;
  // position: fixed;
  // bottom: 50px;
  // left: 50%;
  // transform: translate(-50%, 0);
  // height: 200px;
  display: flex;
  flex-direction: column;
  text-align: center;
  .footerfinancial {
    padding: 30px 0;
  }
  .financialFooter-img {
    div {
      color: #00a0e9;
      font-size: 49.28px;
      margin-bottom: -20px;
    }
    img {
      width: 348px;
      height: 109px;
    }
  }
  .financialFooter-name {
    font-size: 20px;
    height: 30px;
    color: #ffffff;
    h1 {
      span {
        color: #f18337;
        margin: 0 10px;
      }
    }
  }
}
.financialFooter-btn {
  button {
    width: 180px;
    height: 68px;
    background-color: rgba(0, 64, 203, 0.8);
    border: 0;
    font-size: 20px;
    color: #00f6ff;
    cursor: pointer;
  }
}
</style>
